<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/interactive-elements.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:26 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=form-control-infrastructure.html>← 4.10.18 Form control infrastructure</a> — <a href=index.html>Table of Contents</a> — <a href=scripting.html>4.12 Scripting →</a></nav><ol class=toc><li><ol><li><a href=interactive-elements.html#interactive-elements><span class=secno>4.11</span> Interactive elements</a><ol><li><a href=interactive-elements.html#the-details-element><span class=secno>4.11.1</span> The <code>details</code> element</a><li><a href=interactive-elements.html#the-summary-element><span class=secno>4.11.2</span> The <code>summary</code> element</a><li><a href=interactive-elements.html#commands><span class=secno>4.11.3</span> Commands</a><ol><li><a href=interactive-elements.html#facets-2><span class=secno>4.11.3.1</span> Facets</a></ol><li><a href=interactive-elements.html#the-dialog-element><span class=secno>4.11.4</span> The <code>dialog</code> element</a><li><a href=interactive-elements.html#dialog-light-dismiss><span class=secno>4.11.5</span> Dialog light dismiss</a></ol></ol></ol><h3 id=interactive-elements><span class=secno>4.11</span> Interactive elements<a href=#interactive-elements class=self-link></a></h3>

  <h4 id=the-details-element><span class=secno>4.11.1</span> The <dfn data-dfn-type=element><code>details</code></dfn> element<a href=#the-details-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details title="The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an &quot;open&quot; state. A summary or label must be provided using the <summary> element.">Element/details</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>12+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>49+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-details-element:concept-element-categories>Categories</a>:<dd><a id=the-details-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-details-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-details-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-details-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-details-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-details-element:concept-element-content-model>Content model</a>:<dd>One <code id=the-details-element:the-summary-element><a href=#the-summary-element>summary</a></code> element followed by <a id=the-details-element:flow-content-2-3 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-details-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-details-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-details-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-details-element:attr-details-name><a href=#attr-details-name>name</a></code> —  Name of group of mutually-exclusive <code id=the-details-element:the-details-element><a href=#the-details-element>details</a></code> elements
     <dd><code id=the-details-element:attr-details-open><a href=#attr-details-open>open</a></code> —  Whether the details are visible
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-details-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-details>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-details>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-details-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLDetailsElement</code>.</dl>

  <p>The <code id=the-details-element:the-details-element-2><a href=#the-details-element>details</a></code> element <a id=the-details-element:represents href=dom.html#represents>represents</a> a disclosure widget from which the
  user can obtain additional information or controls.</p>

  <p class=note>As with all HTML elements, it is not conforming to use the <code id=the-details-element:the-details-element-3><a href=#the-details-element>details</a></code>
  element when attempting to represent another type of control. For example, tab widgets and
  menu widgets are not disclosure widgets, so abusing the <code id=the-details-element:the-details-element-4><a href=#the-details-element>details</a></code> element to
  implement these patterns is incorrect.</p>

  <p class=note>The <code id=the-details-element:the-details-element-5><a href=#the-details-element>details</a></code> element is not appropriate for footnotes. Please see <a href=semantics-other.html#footnotes>the section on footnotes</a> for details on how to mark up footnotes.</p>

  <p>The  <code id=the-details-element:the-summary-element-2><a href=#the-summary-element>summary</a></code> element child of the element, if any,
  <a id=the-details-element:represents-2 href=dom.html#represents>represents</a> the summary or legend of the details. </p>

  <p>The rest of the element's contents <a id=the-details-element:represents-3 href=dom.html#represents>represents</a> the additional information or
  controls.</p>

  <p>The <dfn data-dfn-for=details id=attr-details-name data-dfn-type=element-attr><code>name</code></dfn> content
  attribute gives the name of the group of related <code id=the-details-element:the-details-element-6><a href=#the-details-element>details</a></code> elements that the element is
  a member of. Opening one member of this group causes other members of the group to close. If the
  attribute is specified, its value must not be the empty string.</p>

  <p>Before using this feature, authors should consider whether this grouping of related
  <code id=the-details-element:the-details-element-7><a href=#the-details-element>details</a></code> elements into an exclusive accordion is helpful or harmful to users.
  While using an exclusive accordion can reduce the maximum amount of space that a set of content
  can occupy, it can also frustrate users who have to open many items to find what they want or
  users who want to look at the contents of multiple items at the same time.</p>

  <p>A document must not contain more than one <code id=the-details-element:the-details-element-8><a href=#the-details-element>details</a></code> element in the same
  <span>details name group</span> that has the <code id=the-details-element:attr-details-open-2><a href=#attr-details-open>open</a></code>
  attribute present.  Authors must not use script to add <code id=the-details-element:the-details-element-9><a href=#the-details-element>details</a></code> elements to a document
  in a way that would cause a <span>details name group</span> to have more than one
  <code id=the-details-element:the-details-element-10><a href=#the-details-element>details</a></code> element with the <code id=the-details-element:attr-details-open-3><a href=#attr-details-open>open</a></code> attribute
  present.</p>

  <p class=note>The group of elements that is created by a common <code id=the-details-element:attr-details-name-2><a href=#attr-details-name>name</a></code> attribute is exclusive, meaning that at most one of the
  <code id=the-details-element:the-details-element-11><a href=#the-details-element>details</a></code> elements can be open at once.  While this exclusivity is enforced by user
  agents, the resulting enforcement immediately changes the <code id=the-details-element:attr-details-open-4><a href=#attr-details-open>open</a></code> attributes in the markup.  This requirement on authors
  forbids such misleading markup.</p>

  <p>A document must not contain a <code id=the-details-element:the-details-element-12><a href=#the-details-element>details</a></code> element that is a descendant of another
  <code id=the-details-element:the-details-element-13><a href=#the-details-element>details</a></code> element in the same <span>details name group</span>.</p>

  <p>Documents that use the <code id=the-details-element:attr-details-name-3><a href=#attr-details-name>name</a></code> attribute to group multiple
  related <code id=the-details-element:the-details-element-14><a href=#the-details-element>details</a></code> elements should keep those related elements together in a containing
  element (such as a <code id=the-details-element:the-section-element><a href=sections.html#the-section-element>section</a></code> element or <code id=the-details-element:the-article-element><a href=sections.html#the-article-element>article</a></code> element). When it makes
  sense for the group to be introduced with a heading, authors should put that heading in a <a href=sections.html#concept-heading id=the-details-element:concept-heading>heading</a> element at the start of the containing element.</p>

  <p class=note>Visually and programmatically grouping related elements together can be important
  for accessible user experiences. This can help users understand the relationship between such
  elements. When related elements are in disparate sections of a web page rather than being grouped,
  the elements' relationships to each other can be less discoverable or understandable.</p>

  <p>The <dfn data-dfn-for=details id=attr-details-open data-dfn-type=element-attr><code>open</code></dfn> content
  attribute is a <a id=the-details-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. If present, it indicates that both the summary and
  the additional information is to be shown to the user. If the attribute is absent, only the
  summary is to be shown.</p>

  

  <div class=example>

   <p>The following example shows the <code id=the-details-element:the-details-element-15><a href=#the-details-element>details</a></code> element being used to hide technical
   details in a progress report.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;progress window&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Copying &quot;Really Achieving Your Childhood Dreams&quot;<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;</c->Copying... <c- p>&lt;</c-><c- f>progress</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;375505392&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;97543282&quot;</c-><c- p>&gt;&lt;/</c-><c- f>progress</c-><c- p>&gt;</c-> 25%<c- p>&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Transfer rate:<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->452KB/s<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Local filename:<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->/home/rpausch/raycd.m4v<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Remote filename:<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->/var/www/lectures/raycd.m4v<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Duration:<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->01:16:27<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Color profile:<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->SD (6-1-6)<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Dimensions:<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->320×240<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following shows how a <code id=the-details-element:the-details-element-16><a href=#the-details-element>details</a></code> element can be used to hide some controls by
   default:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>fn</c-><c- p>&gt;</c->Name &amp; Extension:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>text</c-> <c- e>id</c-><c- o>=</c-><c- s>fn</c-> <c- e>name</c-><c- o>=</c-><c- s>fn</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Pillar Magazine.pdf&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>ext</c-> <c- e>checked</c-><c- p>&gt;</c-> Hide extension<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c-></code></pre>

   <p>One could use this in conjunction with other <code id=the-details-element:the-details-element-17><a href=#the-details-element>details</a></code> in a list to allow the user
   to collapse a set of fields down to a small set of headings, with the ability to open each
   one.</p>

   <p class=details-example><img alt="" src=../images/sample-details-1.png width=345 height=611><img alt="" src=../images/sample-details-2.png width=345 height=666></p>

   <p>In these examples, the summary really just summarizes what the controls can change, and not
   the actual values, which is less than ideal.</p>

  </div>

  <div id=example-details-exclusive-accordion class=example><a href=#example-details-exclusive-accordion class=self-link></a>
   <p>The following example shows the <code id=the-details-element:attr-details-name-4><a href=#attr-details-name>name</a></code> attribute of the
   <code id=the-details-element:the-details-element-18><a href=#the-details-element>details</a></code> element being used to create an exclusive accordion, a set of
   <code id=the-details-element:the-details-element-19><a href=#the-details-element>details</a></code> elements where a user action to open one <code id=the-details-element:the-details-element-20><a href=#the-details-element>details</a></code> element causes
   any open <code id=the-details-element:the-details-element-21><a href=#the-details-element>details</a></code> to close.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;characteristics&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;</c->Material<c- p>&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
  The picture frame is made of solid oak wood.
 <c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;</c->Size<c- p>&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
  The picture frame fits a photo 40cm tall and 30cm wide.
  The frame is 45cm tall, 35cm wide, and 2cm thick.
 <c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;</c->Color<c- p>&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
  The picture frame is available in its natural wood
  color, or with black stain.
 <c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div id=example-details-exclusive-accordion-setting-open class=example><a href=#example-details-exclusive-accordion-setting-open class=self-link></a>
   <p>The following example shows what happens when the <code id=the-details-element:attr-details-open-5><a href=#attr-details-open>open</a></code>
   attribute is set on a <code id=the-details-element:the-details-element-22><a href=#the-details-element>details</a></code> element that is part of a set of elements using the
   <code id=the-details-element:attr-details-name-5><a href=#attr-details-name>name</a></code> attribute to create an exclusive accordion.</p>

   <p>Given the initial markup:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;characteristics&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d1&quot;</c-> <c- e>open</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d2&quot;</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d3&quot;</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>and the script:</p>

   <pre><code class='js'>document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;d2&quot;</c-><c- p>).</c->setAttribute<c- p>(</c-><c- u>&quot;open&quot;</c-><c- p>,</c-> <c- u>&quot;&quot;</c-><c- p>);</c-></code></pre>

   <p>then the resulting tree after the script executes will be equivalent to the markup:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;characteristics&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d1&quot;</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d2&quot;</c-> <c- e>open</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>details</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;frame-characteristics&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;d3&quot;</c-><c- p>&gt;</c->...<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>because setting the <code id=the-details-element:attr-details-open-6><a href=#attr-details-open>open</a></code> attribute on <code>d2</code> removes it from <code>d1</code>.</p>

   <p>The same happens when the user activates the <code id=the-details-element:the-summary-element-3><a href=#the-summary-element>summary</a></code> element inside of <code>d2</code>.</p>
  </div>

  <div class=example>

   <p>Because the <code id=the-details-element:attr-details-open-7><a href=#attr-details-open>open</a></code> attribute is added and removed
   automatically as the user interacts with the control, it can be used in CSS to style the element
   differently based on its state. Here, a style sheet is used to animate the color of the summary
   when the element is opened or closed:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
 <c- f>details</c-> <c- o>&gt;</c-> <c- f>summary</c-> <c- p>{</c-> <c- k>transition</c-><c- p>:</c-> <c- kc>color</c-> <c- mi>1</c-><c- b>s</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>black</c-><c- p>;</c-> <c- p>}</c->
 <c- f>details</c-><c- o>[</c-><c- f>open</c-><c- o>]</c-> <c- o>&gt;</c-> <c- f>summary</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>details</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>summary</c-><c- p>&gt;</c->Automated Status: Operational<c- p>&lt;/</c-><c- f>summary</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Velocity: 12m/s<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Direction: North<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>details</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-summary-element><span class=secno>4.11.2</span> The <dfn data-dfn-type=element><code>summary</code></dfn> element<a href=#the-summary-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary title="The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.">Element/summary</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>49+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>12+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-summary-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-summary-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the <a id=the-summary-element:first-child href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of a <code id=the-summary-element:the-details-element><a href=#the-details-element>details</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-summary-element:concept-element-content-model>Content model</a>:<dd><a id=the-summary-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>, optionally intermixed with <a id=the-summary-element:heading-content-2 href=dom.html#heading-content-2>heading content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-summary-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-summary-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-summary-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-summary-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-summary>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-summary>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-summary-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-summary-element:the-summary-element><a href=#the-summary-element>summary</a></code> element <a id=the-summary-element:represents href=dom.html#represents>represents</a> a summary, caption, or legend for the
  rest of the contents of the <code id=the-summary-element:the-summary-element-2><a href=#the-summary-element>summary</a></code> element's parent <code id=the-summary-element:the-details-element-2><a href=#the-details-element>details</a></code>
  element.</p>

  




  <h4 id=commands><span class=secno>4.11.3</span> Commands<a href=#commands class=self-link></a></h4>

  <h5 id=facets-2><span class=secno>4.11.3.1</span> Facets<a href=#facets-2 class=self-link></a></h5>

  <p>A <dfn id=concept-command>command</dfn> is the abstraction behind menu items, buttons, and
  links. Once a command is defined, other parts of the interface can refer to the same command,
  allowing many access points to a single feature to share facets such as the <a href=#command-facet-disabledstate id=facets-2:command-facet-disabledstate>Disabled State</a>.</p>

  <p id=facets>Commands are defined to have the following <dfn id=concept-facet>facets</dfn>:</p>

  <dl><dt><dfn id=command-facet-label>Label</dfn><dd>The name of the command as seen by the user.<dt><dfn id=command-facet-accesskey>Access Key</dfn><dd>A key combination selected by the user agent that triggers the command. A command might not
   have an Access Key.<dt><dfn id=command-facet-hiddenstate>Hidden State</dfn><dd>Whether the command is hidden or not (basically, whether it should be shown in menus).<dt><dfn id=command-facet-disabledstate>Disabled State</dfn><dd>Whether the command is relevant and can be triggered or not.<dt><dfn id=command-facet-action>Action</dfn><dd>The actual effect that triggering the command will have. This could be a scripted event
   handler, a <a id=facets-2:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to which to <a id=facets-2:navigate href=browsing-the-web.html#navigate>navigate</a>, or a form submission.</dl>

  <p id=expose-commands-in-ui>User agents may expose the <a href=#concept-command id=facets-2:concept-command>commands</a> that match the following criteria:</p>

  <ul><li><p>The <a href=#command-facet-hiddenstate id=facets-2:command-facet-hiddenstate>Hidden State</a> facet is false
   (visible)<li><p>The element is <a id=facets-2:in-a-document href=https://dom.spec.whatwg.org/#in-a-document data-x-internal=in-a-document>in a document</a> with a non-null <a href=document-sequences.html#concept-document-bc id=facets-2:concept-document-bc>browsing context</a>.<li><p>Neither the element nor any of its ancestors has a <code id=facets-2:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute specified.</ul>

  <p>User agents are encouraged to do this especially for commands that have <a href=#command-facet-accesskey id=facets-2:command-facet-accesskey>Access Keys</a>, as a way to advertise those keys to the
  user.</p>

  <p class=example>For example, such commands could be listed in the user agent's menu bar.</p>


  


  <h4 id=the-dialog-element><span class=secno>4.11.4</span> The <dfn data-dfn-type=element><code>dialog</code></dfn> element<a href=#the-dialog-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog title="The <dialog> HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.">Element/dialog</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>98+</span></span><span class="safari yes"><span>Safari</span><span>15.4+</span></span><span class="chrome yes"><span>Chrome</span><span>37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-dialog-element:concept-element-categories>Categories</a>:<dd><a id=the-dialog-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-contexts id=the-dialog-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-dialog-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-dialog-element:concept-element-content-model>Content model</a>:<dd><a id=the-dialog-element:flow-content-2-3 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-dialog-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-dialog-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-dialog-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-dialog-element:attr-dialog-closedby><a href=#attr-dialog-closedby>closedby</a></code> —  Which user actions will close the dialog
     <dd><code id=the-dialog-element:attr-dialog-open><a href=#attr-dialog-open>open</a></code> —  Whether the dialog box is showing
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-dialog-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-dialog>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-dialog>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-dialog-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLDialogElement</code>.</dl>

  <p>The <code id=the-dialog-element:the-dialog-element><a href=#the-dialog-element>dialog</a></code> element represents a transitory part of an application, in the form of
  a small window ("dialog box"), which the user interacts with to perform a task or gather
  information. Once the user is done, the dialog can be automatically closed by the application, or
  manually closed by the user.</p>

  <p>Especially for modal dialogs, which are a familiar pattern across all types of applications,
  authors should work to ensure that dialogs in their web applications behave in a way that is
  familiar to users of non-web applications.</p>

  <p class=note>As with all HTML elements, it is not conforming to use the <code id=the-dialog-element:the-dialog-element-2><a href=#the-dialog-element>dialog</a></code>
  element when attempting to represent another type of control. For example, context menus,
  tooltips, and popup listboxes are not dialog boxes, so abusing the <code id=the-dialog-element:the-dialog-element-3><a href=#the-dialog-element>dialog</a></code> element to
  implement these patterns is incorrect.</p>

  <p>An important part of user-facing dialog behavior is the placement of initial focus. The
  <a href=#dialog-focusing-steps id=the-dialog-element:dialog-focusing-steps>dialog focusing steps</a> attempt to pick a good candidate for initial focus when a
  dialog is shown, but might not be a substitute for authors carefully thinking through the correct
  choice to match user expectations for a specific dialog. As such, authors should use the <code id=the-dialog-element:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute on the descendant element of the dialog that
  the user is expected to immediately interact with after the dialog opens. If there is no such
  element, then authors should use the <code id=the-dialog-element:attr-fe-autofocus-2><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute
  on the <code id=the-dialog-element:the-dialog-element-4><a href=#the-dialog-element>dialog</a></code> element itself.</p>

  <div class=example>
   <p>In the following example, a dialog is used for editing the details of a product in an
   inventory management web application.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dialog</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Product Number <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>readonly</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Product Name <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text&quot;</c-> <c- e>autofocus</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dialog</c-><c- p>&gt;</c-></code></pre>

   <p>If the <code id=the-dialog-element:attr-fe-autofocus-3><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute was not present, the
   Product Number field would have been focused by the dialog focusing steps. Although that is
   reasonable behavior, the author determined that the more relevant field to focus was the Product
   Name field, as the Product Number field is readonly and expects no user input. So, the author
   used autofocus to override the default.</p>

   <p>Even if the author wants to focus the Product Number field by default, they are best off
   explicitly specifying that by using autofocus on that <code id=the-dialog-element:the-input-element><a href=input.html#the-input-element>input</a></code> element. This makes the
   intent obvious to future readers of the code, and ensures the code stays robust in the face of
   future updates. (For example, if another developer added a close button, and positioned it in the
   node tree before the Product Number field).</p>
  </div>

  <p>Another important aspect of user behavior is whether dialogs are scrollable or not. In some
  cases, overflow (and thus scrollability) cannot be avoided, e.g., when it is caused by the user's
  high text zoom settings. But in general, scrollable dialogs are not expected by users. Adding
  large text nodes directly to dialog elements is particularly bad as this is likely to cause the
  dialog element itself to overflow. Authors are best off avoiding them.</p>

  <div class=example>
   <p>The following terms of service dialog respects the above suggestions.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dialog</c-> <c- e>style</c-><c- o>=</c-><c- s>&quot;height: 80vh;&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>&quot;overflow: auto; height: 60vh;&quot;</c-> <c- e>autofocus</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->By placing an order via this Web site on the first day of the fourth month of the year
    2010 Anno Domini, you agree to grant Us a non-transferable option to claim, for now and for
    ever more, your immortal soul.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Should We wish to exercise this option, you agree to surrender your immortal soul,
    and any claim you may have on it, within 5 (five) working days of receiving written
    notification from  this site or one of its duly authorized minions.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
    <c- c>&lt;!-- ... etc., with many more &lt;p&gt; elements ... --&gt;</c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>form</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;dialog&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;agree&quot;</c-><c- p>&gt;</c->Agree<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;disagree&quot;</c-><c- p>&gt;</c->Disagree<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dialog</c-><c- p>&gt;</c-></code></pre>

   <p>Note how the <a href=#dialog-focusing-steps id=the-dialog-element:dialog-focusing-steps-2>dialog focusing steps</a> would have picked the scrollable
   <code id=the-dialog-element:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element by default, but similarly to the previous example, we have placed <code id=the-dialog-element:attr-fe-autofocus-4><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> on the <code id=the-dialog-element:the-div-element-2><a href=grouping-content.html#the-div-element>div</a></code> so as to be more explicit and
   robust against future changes.</p>

   <p>In contrast, if the <code id=the-dialog-element:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> elements expressing the terms of service did not have such
   a wrapper <code id=the-dialog-element:the-div-element-3><a href=grouping-content.html#the-div-element>div</a></code> element, then the <code id=the-dialog-element:the-dialog-element-5><a href=#the-dialog-element>dialog</a></code> itself would become scrollable,
   violating the above advice. Furthermore, in the absence of any <code id=the-dialog-element:attr-fe-autofocus-5><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute, such a markup pattern would have violated
   the above advice and tripped up the <a href=#dialog-focusing-steps id=the-dialog-element:dialog-focusing-steps-3>dialog focusing steps</a>'s default behavior, and
   caused focus to jump to the Agree <code id=the-dialog-element:the-button-element><a href=form-elements.html#the-button-element>button</a></code>, which is a bad user experience.</p>
  </div>

  <div class=example>
   <p>This dialog box has some small print. The <code id=the-dialog-element:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code> element is used to draw the
   user's attention to the more important part.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dialog</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Add to Wallet<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>amt</c-><c- p>&gt;</c->How many gold coins do you want to add to your wallet?<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>amt</c-> <c- e>name</c-><c- o>=</c-><c- s>amt</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>step</c-><c- o>=</c-><c- s>0.01</c-> <c- e>value</c-><c- o>=</c-><c- s>100</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->You add coins at your own risk.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>round</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-><c- p>&gt;</c-> Only add perfectly round coins<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;submit()&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Add Coins&quot;</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dialog</c-><c- p>&gt;</c-></code></pre>
  </div>

  <hr>

  <p>The <dfn data-dfn-for=dialog id=attr-dialog-open data-dfn-type=element-attr><code>open</code></dfn> attribute
  is a <a id=the-dialog-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. When specified, it indicates that the <code id=the-dialog-element:the-dialog-element-6><a href=#the-dialog-element>dialog</a></code>
  element is active and that the user can interact with it.</p>

  <p>The <dfn data-dfn-for=dialog id=attr-dialog-closedby data-dfn-type=element-attr><code>closedby</code></dfn>
  content attribute is an <a id=the-dialog-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and
  states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=dialog/closedby id=attr-dialog-closedby-any data-dfn-type=attr-value><code>any</code></dfn>
     <td><dfn id=attr-dialog-closedby-any-state>Any</dfn>
     <td><a href=interaction.html#close-request id=the-dialog-element:close-request>Close requests</a> or clicks outside close the dialog.
    <tr><td><dfn data-dfn-for=dialog/closedby id=attr-dialog-closedby-closerequest data-dfn-type=attr-value><code>closerequest</code></dfn>
     <td><dfn id=attr-dialog-closedby-closerequest-state>Close Request</dfn>
     <td><a href=interaction.html#close-request id=the-dialog-element:close-request-2>Close requests</a> close the dialog.
    <tr><td><dfn data-dfn-for=dialog/closedby id=attr-dialog-closedby-none data-dfn-type=attr-value><code>none</code></dfn>
     <td><dfn id=attr-dialog-closedby-none-state>None</dfn>
     <td>No user actions automatically close the dialog.
  </table>

  <p>The <code id=the-dialog-element:attr-dialog-closedby-2><a href=#attr-dialog-closedby>closedby</a></code> attribute's <i id=the-dialog-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> and <i id=the-dialog-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value
  default</a></i> are both the <dfn id=attr-dialog-closedby-auto-state>Auto</dfn> state.</p>

  <p class=note>The <a href=#attr-dialog-closedby-auto-state id=the-dialog-element:attr-dialog-closedby-auto-state>Auto</a> state behaves as
  <a href=#attr-dialog-closedby-closerequest-state id=the-dialog-element:attr-dialog-closedby-closerequest-state>Close Request</a> state when the
  <code id=the-dialog-element:the-dialog-element-7><a href=#the-dialog-element>dialog</a></code> was shown using its <code id=the-dialog-element:dom-dialog-showmodal><a href=#dom-dialog-showmodal>showModal()</a></code>
  method; otherwise the <a href=#attr-dialog-closedby-none-state id=the-dialog-element:attr-dialog-closedby-none-state>None</a> state.</p>

  

  <div id=note-dialog-remove-open-attribute class=note><a href=#note-dialog-remove-open-attribute class=self-link></a>
   <p>Removing the <code id=the-dialog-element:attr-dialog-open-2><a href=#attr-dialog-open>open</a></code> attribute will usually hide the
   dialog. However, doing so has a number of strange additional consequences:

   <ul><li><p>The <code id=the-dialog-element:event-close><a href=indices.html#event-close>close</a></code> event will not be fired.<li><p>The <code id=the-dialog-element:dom-dialog-close><a href=#dom-dialog-close>close()</a></code> method, and any <a href=interaction.html#close-request id=the-dialog-element:close-request-3>close requests</a>, will no longer be able to close the dialog.<li><p>If the dialog was shown using its <code id=the-dialog-element:dom-dialog-showmodal-2><a href=#dom-dialog-showmodal>showModal()</a></code>
    method, the <code>Document</code> will still be <a href=interaction.html#blocked-by-a-modal-dialog id=the-dialog-element:blocked-by-a-modal-dialog>blocked</a>.</ul>

   <p>For these reasons, it is generally better to never remove the <code id=the-dialog-element:attr-dialog-open-3><a href=#attr-dialog-open>open</a></code> attribute manually. Instead, use the <code id=the-dialog-element:dom-dialog-requestclose><a href=#dom-dialog-requestclose>requestClose()</a></code> or <code id=the-dialog-element:dom-dialog-close-2><a href=#dom-dialog-close>close()</a></code> methods to close the dialog, or the <code id=the-dialog-element:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute to hide it.</p>
  </div>

  <p>The <code id=the-dialog-element:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute must not be specified on
  <code id=the-dialog-element:the-dialog-element-8><a href=#the-dialog-element>dialog</a></code> elements.</p>

  <hr>

  <dl class=domintro><dt><code><var>dialog</var>.<span id=dom-dialog-show>show</span>()</code><dd><p>Displays the <code id=the-dialog-element:the-dialog-element-9><a href=#the-dialog-element>dialog</a></code> element.<dt><code><var>dialog</var>.<span id=dom-dialog-showmodal>showModal</span>()</code><dd>
    <p>Displays the <code id=the-dialog-element:the-dialog-element-10><a href=#the-dialog-element>dialog</a></code> element and makes it the top-most modal dialog.</p>

    <p>This method honors the <code id=the-dialog-element:attr-fe-autofocus-6><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute.</p>
   <dt><code><var>dialog</var>.<span id=dom-dialog-close>close</span>([ <var>result</var> ])</code><dd>
    <p>Closes the <code id=the-dialog-element:the-dialog-element-11><a href=#the-dialog-element>dialog</a></code> element.</p>

    <p>The argument, if provided, provides a return value.</p>
   <dt><code><var>dialog</var>.<span id=dom-dialog-requestclose>requestClose</span>([ <var>result</var> ])</code><dd>
    <p>Acts as if a <a href=interaction.html#close-request id=the-dialog-element:close-request-4>close request</a> was sent targeting
    <var>dialog</var>, by first firing a <code id=the-dialog-element:event-cancel><a href=indices.html#event-cancel>cancel</a></code> event, and if
    that event is not canceled with <code id=the-dialog-element:dom-event-preventdefault><a data-x-internal=dom-event-preventdefault href=https://dom.spec.whatwg.org/#dom-event-preventdefault>preventDefault()</a></code>,
    proceeding to close the <var>dialog</var> in the same way as the <code id=the-dialog-element:dom-dialog-close-3><a href=#dom-dialog-close>close()</a></code> method (including firing a <code id=the-dialog-element:event-close-2><a href=indices.html#event-close>close</a></code> event).</p>

    <p>This is a helper utility that can be used to consolidate cancelation and closing logic into
    the <code id=the-dialog-element:event-cancel-2><a href=indices.html#event-cancel>cancel</a></code> and <code id=the-dialog-element:event-close-3><a href=indices.html#event-close>close</a></code> event
    handlers, by having all non-<a href=interaction.html#close-request id=the-dialog-element:close-request-5>close request</a> closing
    affordances call this method.</p>

    <p>Note that this method ignores the <code id=the-dialog-element:attr-dialog-closedby-3><a href=#attr-dialog-closedby>closedby</a></code>
    attribute: that is, even if <code id=the-dialog-element:attr-dialog-closedby-4><a href=#attr-dialog-closedby>closedby</a></code> is set to
    "<code id=the-dialog-element:attr-dialog-closedby-none><a href=#attr-dialog-closedby-none>none</a></code>", the same behavior will apply.</p>

    <p>The argument, if provided, provides a return value.</p>
   <dt><code><var>dialog</var>.<span id=dom-dialog-returnvalue>returnValue</span> [ = <var>result</var> ]</code><dd>
    <p>Returns the <code id=the-dialog-element:the-dialog-element-12><a href=#the-dialog-element>dialog</a></code>'s return value.</p>

    <p>Can be set, to update the return value.</p>
   </dl>

  

  <p>To <dfn id=queue-a-dialog-toggle-event-task>queue a dialog toggle event task</dfn> given a <code id=the-dialog-element:the-dialog-element-13><a href=#the-dialog-element>dialog</a></code> element
  <var>element</var>, a string <var>oldState</var>, a string <var>newState</var>, and an
  <code id=the-dialog-element:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> or null <var>source</var>:</p>

  <ol><li>
    <p>If <var>element</var>'s <span>dialog toggle task tracker</span> is not null, then:</p>

    <ol><li><p>Set <var>oldState</var> to <var>element</var>'s <span>dialog toggle task
     tracker</span>'s <a href=interaction.html#toggle-task-old-state id=the-dialog-element:toggle-task-old-state>old state</a>.<li><p>Remove <var>element</var>'s <span>dialog toggle task tracker</span>'s <a href=interaction.html#toggle-task-task id=the-dialog-element:toggle-task-task>task</a> from its <span>task queue</span>.<li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to null.</ol>
   <li>
    <p><span>Queue an element task</span> given the <span>DOM manipulation task source</span> and
    <var>element</var> to run the following steps:</p>

    <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-dialog-element:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-dialog-element:event-toggle><a href=indices.html#event-toggle>toggle</a></code> at <var>element</var>, using <code>ToggleEvent</code>, with
     the <code id=the-dialog-element:dom-toggleevent-oldstate-2><a href=interaction.html#dom-toggleevent-oldstate-2>oldState</a></code> attribute initialized to
     <var>oldState</var>, the <code id=the-dialog-element:dom-toggleevent-newstate-2><a href=interaction.html#dom-toggleevent-newstate-2>newState</a></code> attribute
     initialized to <var>newState</var>, and the <code id=the-dialog-element:dom-toggleevent-source-2><a href=interaction.html#dom-toggleevent-source-2>source</a></code> attribute initialized to
     <var>source</var>.<li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to null.</ol>
   <li><p>Set <var>element</var>'s <span>dialog toggle task tracker</span> to a struct with <a href=interaction.html#toggle-task-task id=the-dialog-element:toggle-task-task-2>task</a> set to the just-queued <span>task</span> and <a href=interaction.html#toggle-task-old-state id=the-dialog-element:toggle-task-old-state-2>old state</a> set
   to <var>oldState</var>.</ol>

  <p>To retrieve a dialog's <dfn id=computed-closed-by-state>computed closed-by state</dfn>, given a <code id=the-dialog-element:the-dialog-element-14><a href=#the-dialog-element>dialog</a></code>
  <var>dialog</var>:

  <ol><li>
    <p>If the state of <var>dialog</var>'s <code id=the-dialog-element:attr-dialog-closedby-5><a href=#attr-dialog-closedby>closedby</a></code>
    attribute is <a href=#attr-dialog-closedby-auto-state id=the-dialog-element:attr-dialog-closedby-auto-state-2>Auto</a>:</p>

    <ol><li><p>If <var>dialog</var>'s <span>is modal</span> is true, then return <a href=#attr-dialog-closedby-closerequest-state id=the-dialog-element:attr-dialog-closedby-closerequest-state-2>Close Request</a>.<li><p>Return <a href=#attr-dialog-closedby-none-state id=the-dialog-element:attr-dialog-closedby-none-state-2>None</a>.</ol>
   <li><p>Return the state of <var>dialog</var>'s <code id=the-dialog-element:attr-dialog-closedby-6><a href=#attr-dialog-closedby>closedby</a></code> attribute.</ol>

  <p>The <dfn id=dialog-focusing-steps>dialog focusing steps</dfn>, given a <code id=the-dialog-element:the-dialog-element-15><a href=#the-dialog-element>dialog</a></code> element <var>subject</var>,
  are as follows:</p>

  <ol><li><p>If the <span>allow focus steps</span> given <var>subject</var>'s <a id=the-dialog-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a> return false, then return.<li><p>Let <var>control</var> be null.<li><p>If <var>subject</var> has the <code id=the-dialog-element:attr-fe-autofocus-7><a href=interaction.html#attr-fe-autofocus>autofocus</a></code>
   attribute, then set <var>control</var> to <var>subject</var>.<li><p>If <var>control</var> is null, then set <var>control</var> to the <span>focus
   delegate</span> of <var>subject</var>.<li><p>If <var>control</var> is null, then set <var>control</var> to <var>subject</var>.<li>
    <p>Run the <span>focusing steps</span> for <var>control</var>.</p>

    <p class=note>If <var>control</var> is not <span>focusable</span>, this will do nothing. This
    would only happen if subject had no focus delegate, and the user agent decided that
    <code id=the-dialog-element:the-dialog-element-16><a href=#the-dialog-element>dialog</a></code> elements were not generally focusable. In that case, any <a href=#note-dialog-plus-focus-fixup>earlier modifications</a> to the <a id=the-dialog-element:focused-area-of-the-document href=interaction.html#focused-area-of-the-document>focused area of the
    document</a> will apply.</p>
   <li><p>Let <var>topDocument</var> be <var>control</var>'s <a id=the-dialog-element:node-navigable href=document-sequences.html#node-navigable>node navigable</a>'s <a href=document-sequences.html#nav-top id=the-dialog-element:nav-top>top-level traversable</a>'s <a href=document-sequences.html#nav-document id=the-dialog-element:nav-document>active
   document</a>.<li><p>If <var>control</var>'s <a id=the-dialog-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-dialog-element:concept-document-origin data-x-internal=concept-document-origin>origin</a> is not the <a href=browsers.html#same-origin id=the-dialog-element:same-origin>same</a>
   as the <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-dialog-element:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a> of <var>topDocument</var>, then
   return.<li><p><a href=https://infra.spec.whatwg.org/#list-empty id=the-dialog-element:list-empty data-x-internal=list-empty>Empty</a> <var>topDocument</var>'s
   <span>autofocus candidates</span>.<li><p>Set <var>topDocument</var>'s <span>autofocus processed flag</span> to true.</ol>

  <p>The <dfn id=dialog-setup-steps>dialog setup steps</dfn>, given a <code id=the-dialog-element:the-dialog-element-17><a href=#the-dialog-element>dialog</a></code> element <var>subject</var>, are
  as follows:</p>

  <ol><li><p><a id=the-dialog-element:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>subject</var> has an <code id=the-dialog-element:attr-dialog-open-4><a href=#attr-dialog-open>open</a></code>
   attribute.<li><p><a id=the-dialog-element:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>subject</var> is <a id=the-dialog-element:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>.<li><p><a id=the-dialog-element:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>subject</var>'s <a id=the-dialog-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=the-dialog-element:open-dialogs-list href=dom.html#open-dialogs-list>open dialogs
   list</a> does not <a href=https://infra.spec.whatwg.org/#list-contain id=the-dialog-element:list-contains data-x-internal=list-contains>contain</a> <var>subject</var>.<li><p>Add <var>subject</var> to <var>subject</var>'s <a id=the-dialog-element:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=the-dialog-element:open-dialogs-list-2 href=dom.html#open-dialogs-list>open
   dialogs list</a>.<li><p><span>Set the dialog close watcher</span> with <var>subject</var>.</ol>

  <p>The <dfn id=dialog-cleanup-steps>dialog cleanup steps</dfn>, given a <code id=the-dialog-element:the-dialog-element-18><a href=#the-dialog-element>dialog</a></code> element <var>subject</var>,
  are as follows:</p>

  <ol><li><p><a href=https://infra.spec.whatwg.org/#list-remove id=the-dialog-element:list-remove data-x-internal=list-remove>Remove</a> <var>subject</var> from <var>subject</var>'s
   <a id=the-dialog-element:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=the-dialog-element:open-dialogs-list-3 href=dom.html#open-dialogs-list>open dialogs list</a>.<li>
    <p>If <var>subject</var>'s <span>close watcher</span> is not
    null, then:</p>

    <ol><li><p><span>Destroy</span> <var>subject</var>'s <span>close watcher</span>.<li><p>Set <var>subject</var>'s <span>close watcher</span> to
     null.</ol>
   </ol>

  <h4 id=dialog-light-dismiss><span class=secno>4.11.5</span> <dfn>Dialog light dismiss</dfn><a href=#dialog-light-dismiss class=self-link></a></h4>

  <p class=note>"Light dismiss" means that clicking outside of a <code id=dialog-light-dismiss:the-dialog-element><a href=#the-dialog-element>dialog</a></code> element whose <code id=dialog-light-dismiss:attr-dialog-closedby><a href=#attr-dialog-closedby>closedby</a></code> attribute is in the <a href=#attr-dialog-closedby-any-state id=dialog-light-dismiss:attr-dialog-closedby-any-state>Any</a> state will close the <code id=dialog-light-dismiss:the-dialog-element-2><a href=#the-dialog-element>dialog</a></code> element. This
  is in addition to how such <code id=dialog-light-dismiss:the-dialog-element-3><a href=#the-dialog-element>dialog</a></code>s respond to <a href=interaction.html#close-request id=dialog-light-dismiss:close-request>close requests</a>.</p>

  <p>To <dfn id=light-dismiss-open-dialogs>light dismiss open dialogs</dfn>, given a <code id=dialog-light-dismiss:pointerevent><a data-x-internal=pointerevent href=https://w3c.github.io/pointerevents/#pointerevent-interface>PointerEvent</a></code> <var>event</var>:</p>

  <ol><li><p><a id=dialog-light-dismiss:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>event</var>'s <code id=dialog-light-dismiss:dom-event-istrusted><a data-x-internal=dom-event-istrusted href=https://dom.spec.whatwg.org/#dom-event-istrusted>isTrusted</a></code> attribute is true.<li><p>Let <var>document</var> be <var>event</var>'s <a href=https://dom.spec.whatwg.org/#concept-event-target id=dialog-light-dismiss:concept-event-target data-x-internal=concept-event-target>target</a>'s <a id=dialog-light-dismiss:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>document</var>'s <a id=dialog-light-dismiss:open-dialogs-list href=dom.html#open-dialogs-list>open dialogs list</a> is <a href=https://infra.spec.whatwg.org/#list-is-empty id=dialog-light-dismiss:list-is-empty data-x-internal=list-is-empty>empty</a>, then return.<li><p>Let <var>ancestor</var> be the result of running <a href=#nearest-clicked-dialog id=dialog-light-dismiss:nearest-clicked-dialog>nearest clicked dialog</a>
   given <var>event</var>.<li><p>If <var>event</var>'s <code id=dialog-light-dismiss:dom-event-type><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is
   "<code id=dialog-light-dismiss:event-pointerdown><a data-x-internal=event-pointerdown href=https://w3c.github.io/pointerevents/#the-pointerdown-event>pointerdown</a></code>", then set <var>document</var>'s
   <span>dialog pointerdown target</span> to <var>ancestor</var>.<li>
    <p>If <var>event</var>'s <code id=dialog-light-dismiss:dom-event-type-2><a data-x-internal=dom-event-type href=https://dom.spec.whatwg.org/#dom-event-type>type</a></code> is
    "<code id=dialog-light-dismiss:event-pointerup><a data-x-internal=event-pointerup href=https://w3c.github.io/pointerevents/#the-pointerup-event>pointerup</a></code>", then:</p>

    <ol><li><p>Let <var>sameTarget</var> be true if <var>ancestor</var> is <var>document</var>'s
     <span>dialog pointerdown target</span>.<li><p>Set <var>document</var>'s <span>dialog pointerdown target</span> to null.<li><p>If <var>sameTarget</var> is false, then return.<li><p>Let <var>topmostDialog</var> be the last element of <var>document</var>'s <a id=dialog-light-dismiss:open-dialogs-list-2 href=dom.html#open-dialogs-list>open
     dialogs list</a>.<li><p>If <var>ancestor</var> is <var>topmostDialog</var>, then return.<li><p>If <var>topmostDialog</var>'s <a href=#computed-closed-by-state id=dialog-light-dismiss:computed-closed-by-state>computed closed-by state</a> is not <a href=#attr-dialog-closedby-any-state id=dialog-light-dismiss:attr-dialog-closedby-any-state-2>Any</a>, then return.<li><p><a id=dialog-light-dismiss:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>topmostDialog</var>'s <span>close watcher</span> is not null.<li><p><span>Request to close</span>
     <var>topmostDialog</var>'s <span>close watcher</span> with
     false.</ol>
   </ol>

  <p>To <dfn id=run-light-dismiss-activities>run light dismiss activities</dfn>, given a <code id=dialog-light-dismiss:pointerevent-2><a data-x-internal=pointerevent href=https://w3c.github.io/pointerevents/#pointerevent-interface>PointerEvent</a></code>
  <var>event</var>:</p>

  <ol><li><p>Run <a id=dialog-light-dismiss:light-dismiss-open-popovers href=popover.html#light-dismiss-open-popovers>light dismiss open popovers</a> with <var>event</var>.<li><p>Run <a href=#light-dismiss-open-dialogs id=dialog-light-dismiss:light-dismiss-open-dialogs>light dismiss open dialogs</a> with <var>event</var>.</ol>

  <p class=XXX><a href=#run-light-dismiss-activities id=dialog-light-dismiss:run-light-dismiss-activities>Run light dismiss activities</a> will be called by the <a href=https://github.com/w3c/pointerevents/pull/460>Pointer Events spec</a> when the user clicks
  or touches anywhere on the page.</p>

  <p>To find the <dfn id=nearest-clicked-dialog>nearest clicked dialog</dfn>, given a <code id=dialog-light-dismiss:pointerevent-3><a data-x-internal=pointerevent href=https://w3c.github.io/pointerevents/#pointerevent-interface>PointerEvent</a></code>
  <var>event</var>:</p>

  <ol><li><p>Let <var>target</var> be <var>event</var>'s <a href=https://dom.spec.whatwg.org/#concept-event-target id=dialog-light-dismiss:concept-event-target-2 data-x-internal=concept-event-target>target</a>.<li><p>If <var>target</var> is a <code id=dialog-light-dismiss:the-dialog-element-4><a href=#the-dialog-element>dialog</a></code> element, <var>target</var> has an <code id=dialog-light-dismiss:attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, <var>target</var>'s <span>is modal</span> is
   true, and <var>event</var>'s <code id=dialog-light-dismiss:mouseevent-clientx><a data-x-internal=mouseevent-clientx href=https://drafts.csswg.org/cssom-view/#dom-mouseevent-clientx>clientX</a></code> and
   <code id=dialog-light-dismiss:mouseevent-clienty><a data-x-internal=mouseevent-clienty href=https://drafts.csswg.org/cssom-view/#dom-mouseevent-clienty>clientY</a></code> are outside the bounds of <var>target</var>,
   then return null.

   <p class=note>The check for <code id=dialog-light-dismiss:mouseevent-clientx-2><a data-x-internal=mouseevent-clientx href=https://drafts.csswg.org/cssom-view/#dom-mouseevent-clientx>clientX</a></code> and <code id=dialog-light-dismiss:mouseevent-clienty-2><a data-x-internal=mouseevent-clienty href=https://drafts.csswg.org/cssom-view/#dom-mouseevent-clienty>clientY</a></code> is because a pointer event that hits the <code>::backdrop</code> pseudo element of a dialog will result in <var>event</var> having a
   target of the dialog element itself.</p>

   <li><p>Let <var>currentNode</var> be <var>target</var>.<li>
    <p>While <var>currentNode</var> is not null:</p>

    <ol><li><p>If <var>currentNode</var> is a <code id=dialog-light-dismiss:the-dialog-element-5><a href=#the-dialog-element>dialog</a></code> element and <var>currentNode</var>
     has an <code id=dialog-light-dismiss:attr-dialog-open-2><a href=#attr-dialog-open>open</a></code> attribute, then return
     <var>currentNode</var>.<li><p>Set <var>currentNode</var> to <var>currentNode</var>'s parent in the <a id=dialog-light-dismiss:flat-tree href=https://drafts.csswg.org/css-scoping/#flat-tree data-x-internal=flat-tree>flat
     tree</a>.</ol>
   <li><p>Return null.</ol>

  <nav><a href=form-control-infrastructure.html>← 4.10.18 Form control infrastructure</a> — <a href=index.html>Table of Contents</a> — <a href=scripting.html>4.12 Scripting →</a></nav>
